import React from 'react'
import Utils from './../../utils/utils'
import { Input, Select, Form, Button, Checkbox, DatePicker } from 'antd'

const FormItem = Form.Item
// const Option = Select.Option
class FilterForm extends React.Component{

    //2.处理提交按钮  
    handleFilterSubmit = () => {
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue)
    }

    //1. 将所有的数据封装
    initFormList = () => {
        const { getFieldDecorator } = this.props.form;
        //接受父组件传过来的值
        const formList = this.props.formList;
        const formItemList = [];
        if (formList && formList.length > 0 ) {
            formList.forEach((item, i) => {
                let label = item.label;
                let field = item.field;
                let placeholder = item.placeholder;
                let initialValue = item.initialValue;
                let width = item.width;
                if (item.type == '时间查询') {
                    const begin_time = <FormItem label={label}>
                    {
                        getFieldDecorator('begin_time')(
                            <DatePicker showTime={true} placeholder='选择开始时间' format="YYYY-MM-DD HH:MM:SS"/>
                        )
                    } 
                </FormItem>
                formItemList.push(begin_time)
                const end_time = <FormItem label="~" colon={false}>
                    {
                        getFieldDecorator('end_time')(
                            <DatePicker showTime={true} placeholder='选择结束时间' format="YYYY-MM-DD HH:MM:SS"/>
                        )
                    }
                </FormItem>
                formItemList.push(end_time)
                } else if (item.type === 'INPUT') {
                    const INPUT = <FormItem label={label}>
                        {
                            //[field], []可以被当作变量形式，不能{}
                            getFieldDecorator([field],{
                                initialValue: initialValue
                            })(
                                <Input placeholder={placeholder}/>
                            )
                        }
                    </FormItem>
                    formItemList.push(INPUT)
                } else if (item.type === 'SELECT') {
                    const SELECT = <FormItem label={label}>
                        {
                            //[field], []可以被当作变量形式，不能{}
                            getFieldDecorator([field],{
                                initialValue: initialValue
                            })(
                                <Select
                                style={{ width: width }}
                                placeholder={placeholder}
                                >
                                {/* 调用opation封装的方法  */}
                                { Utils.getOptionList(item.list) }
                                </Select>
                            )
                        }
                    </FormItem>
                    formItemList.push(SELECT)
                }else if (item.type === 'CHECKBOX') {
                    const CHECKBOX = <FormItem label={label}>
                        {
                            //[field], []可以被当作变量形式，不能{}
                            getFieldDecorator([field],{
                                valuePropName : 'checked',
                                initialValue: initialValue  // true || false
                            })(
                                <Checkbox>
                                    { label }
                                </Checkbox>
                            )
                        }
                    </FormItem>
                    formItemList.push(CHECKBOX)
                }
            })
        }
        return formItemList
    }
    render() {
        return(
            <Form layout="inline">
                { this.initFormList() }
                <FormItem>
                    <Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleFilterSubmit}>查询</Button>
                    <Button onClick={this.reset}>重置</Button>
                </FormItem>
            </Form>
        )
    }
}


export default Form.create({})(FilterForm);